I'm making an audio player, and I have a list of divs acting as my playlist... I'm using JS to make the list, and I'm using this script to search through them:
/*Search Songs*/
function searchSongs(){
let input = _('#songSearch').value.toLowerCase();
let items = _all('.item');
let dividers = _all(".divider");
for (let i = 0; i < items.length; i++) {
if (!items[i].innerHTML.toLowerCase().includes(input)) {
items[i].style.display = "none";
}
else {
items[i].style.display = "";
}
}
// add noresults message at end if all list divs are hidden
if (!items.innerHTML.toLowerCase().includes(input)) {
_('.noResults').innerHTML = `<p>No results found for "${input}"`
}
}
I have a paragraph element at the end of my list (with nothing in it) and I want to show the message (<p>No results found for "${input}") is there some js I can use to accomplish this? The script above is working for the searching, but not working for the message.
/*Search Songs*/
function searchSongs(){
let input = _('#songSearch').value.toLowerCase();
let items = _all('.item');
let dividers = _all(".divider");
let counter = 0;
for (let i = 0; i < items.length; i++) {
if (!items[i].innerHTML.toLowerCase().includes(input)) {
items[i].style.display = "none";
counter++;
}
else {
items[i].style.display = "";
}
}
// keeping the result 22 letters long (for asthetic purposes)
let maxLen = 22;
if (input.length > maxLen) {
input = input.substring(0, maxLen - 3) + "...";
}
if (counter >= items.length) {
_('#noResults').innerHTML = `No results found for "${input}"` //add no results message if all items are hidden...
} else {
_('#noResults').innerHTML = `` //else hide the message by removing text.
}
}
Thanks, @Asif !!
I've made a little modification in your function. I hope this will solve your issue.
/*Search Songs*/
function searchSongs(){
let input = _('#songSearch').value.toLowerCase();
let items = _all('.item');
let dividers = _all(".divider");
let counter = 0;
for (let i = 0; i < items.length; i++) {
if (!items[i].innerHTML.toLowerCase().includes(input)) {
items[i].style.display = "none";
}
else {
items[i].style.display = "";
counter++;
}
}
// add noresults message at end if all list divs are hidden
if (counter > 0) {
_('.noResults').innerHTML = `<p>No results found for "${input}"`
}
}